<template>
    <!--操作栏-->
    <div class="oprateContainer">
        <div class="opTop"></div>
        <div class="mb-4">
          <el-button @click="clickShowAll" type="success" class="nextBtn">全部</el-button>      
          <el-button @click="clickNextDay" type="success" class="nextBtn">下一条<el-icon class="el-icon--right" plain><ArrowRight /></el-icon></el-button>
          <el-input-number ref="number" v-model="num" :min="0" :max="10000" class="inputDays" @change="handleChange" />
        </div>
        <div >
            <p class="demonstration">选择日期</p>
            <el-date-picker
                v-model="dateTime"
                type="date"
                placeholder="Pick a day"
                :size="large"
                style="width: 80%;"
                @change="handleDateChange"
            />
        </div>
        <a href="https://xiezuocat.com/pro/8577303197383397376?showFiles=true&top=home" target="_blank">大盘判断</a>
      </div>
  </template>
  
  <script>
  export default {
      data() {
        return {
          large: 'large',
          num:0,
          dateTime: new Date(),
        }
      },
      props: {
        onEvent: Function,
        onPickEvent: Function,
      },
      methods: {
        clickNextDay() {
          this.num = this.num > 1 ? this.num - 1 : 0 
        },
        clickShowAll() {
          this.num = 0
        },
        handleChange(val) {
          this.num = val
        },
        handleDateChange(val) {
            console.log('选择了新的日期/时间:', val);
            const date = new Date(val)
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以需要加1
            const day = ('0' + date.getDate()).slice(-2);
            const dayTime = `${year}-${month}-${day}`;
            console.log('选择了新的日期/时间:', dayTime);
            this.onPickEvent(dayTime)
        },
      },
      watch: {
        num(newValue, oldValue) {
          this.onEvent(newValue)
        },
      },
  }
  </script>
  
  <style scoped>

  .oprateContainer {
    flex: 13; 
  }
  .opTop {
    height: 30%;
  }
  .nextBtn {
    font-size: 15px;
    font-weight: bold;
  }
  .inputDays {
    margin-top:30px;
  }
  .picker {
    margin-top:15px;
    width:30%;
  }
  
  </style>
  